 <template>
   <!--左侧菜单 begin-->
 <div>
  <div class="leftMent_box" :class="addclass(isBorder)">
    <ul>
      <li v-for="(item, index) in msgData">
        <span @click="selection(index)" v-bind:class='{activeList:index==isactive}'>{{item}}</span>
      </li>
    </ul>
  </div>
   </div>
   <!--左侧菜单 end-->
</template>

<script>
export default {
  props: ['msgData', 'isBorder'],
  data() {
    return {
      isactive: 0
    }
  },
  components: {

  },
  methods: {
    selection(item) {
      this.isactive = item
    },
    addclass(i) {
      switch (i) {
        case 'all':
          return 'isBorderLine_all'
        case 'left':
          return 'isBorderLine_left'
        case 'right':
          return 'isBorderLine_right'
        case 'top':
          return 'isBorderLine_top'
        case 'bottom':
          return 'isBorderLine_bottom'
        case '':
          return ''
      }
    }
  }
}
</script>
<style scoped>
  .leftMent_box{
    height: 392px;
    overflow-y: auto;
  }
  .leftMent_box ul li{
    width: 100%;
   }
  .leftMent_box ul li span{
    font-size: 14px;
    color: #333333;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    width: 100%;
    padding-left: 10px;
    cursor: pointer;
    transition: all .3s;
  }
  .leftMent_box ul li span:hover, .activeList{
    background-color: var(--primaryBtn);
    color: #ffffff !important;
  }
  .isBorderLine_left{
    border-left: 1px solid #cccccc;
  }
  .isBorderLine_right{
    border-right: 1px solid #cccccc;
  }
  .isBorderLine_top{
    border-top: 1px solid #cccccc;
  }
  .isBorderLine_bottom{
    border-bottom: 1px solid #cccccc;
  }
  .isBorderLine_all{
    border: 1px solid #cccccc;
  }
</style>

